<template>
  <div>
    <ul>
      <li @click="swtichCom('Child1')">child1</li>
      <li @click="swtichCom('Child2')">child2</li>
      <li @click="swtichCom('Child3')">child3</li>
    </ul>
    <div class="tab-content">
      <component :is="myCom"></component>
    </div>
  </div>
</template>

<script>
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
import Child3 from './Child3.vue';

export default {
  name: 'DEMOIsComponent',

  data() {
    return {
      myCom: 'Child1',
    };
  },
  components: {
    Child1, Child2, Child3
  },

  methods: {
    swtichCom(com) {
      this.myCom = com
    }
  },
};
</script>

<style lang="less" scoped>
ul {
  overflow: hidden;
}

li {
  float: left;
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  list-style-type: none;
}

.tab-content {
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
</style>